
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:yp/helper.dart';
import 'package:yp/router.dart';
import 'package:get/get.dart';

import 'logic.dart';
import 'state.dart';

class GiftCardPage extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return _GiftCardPage();
  }
}

class _GiftCardPage extends State<GiftCardPage> {
  final GiftCardLogic logic = Get.put(GiftCardLogic());
  final GiftCardState state = Get.find<GiftCardLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        elevation: 0,
        backgroundColor: Color(0xff0F0B0A),
        brightness: Brightness.dark,
        title: Text(
          '154****321 礼品卡',
          style: TextStyle(
            color: Colors.white,
            fontSize: 17,
          ),
        ),
        iconTheme: IconThemeData(
          color: Colors.white,
        ),
      ),
      body: GetBuilder<GiftCardLogic>(
        builder: (logic) {
          return Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  height: setWidth(100),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    border: Border.all(
                      width: setWidth(1),
                      color: Color(0x40000000),
                    )
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      GestureDetector(
                        onTap: () {
                          print('有效 按钮点击事件！！！ ');
                          logic.onChooseIndexClick(0);
                        },
                        behavior: HitTestBehavior.opaque,
                        child: Container(
                          width: setWidth(374),
                          height: setWidth(100),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Container(height: setWidth(6),),
                              Text(
                                '有效(2)',
                                style: TextStyle(
                                  color: state.chooseIndex == 0 ? Color(0xffC99F4F) : Color(0xff999999),
                                  fontSize: 18,
                                ),
                              ),
                              Container(
                                height: setWidth(6),
                                width: setWidth(40),
                                decoration: BoxDecoration(
                                  color: state.chooseIndex == 0 ? Color(0xffC99F4F) : Colors.transparent,
                                  borderRadius: BorderRadius.circular(setWidth(3)),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          print('失效 点击事件！！！');
                          logic.onChooseIndexClick(1);
                        },
                        behavior: HitTestBehavior.opaque,
                        child: Container(
                          width: setWidth(374),
                          height: setWidth(100),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Container(height: setWidth(6),),
                              Text(
                                '失效(1)',
                                style: TextStyle(
                                  color: state.chooseIndex == 0 ? Color(0xff999999) : Color(0xffC99F4F),
                                  fontSize: 18,
                                ),
                              ),
                              Container(
                                height: setWidth(6),
                                width: setWidth(40),
                                decoration: BoxDecoration(
                                  color: state.chooseIndex == 0 ? Colors.transparent : Color(0xffC99F4F),
                                  borderRadius: BorderRadius.circular(setWidth(3)),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                state.chooseIndex == 0 ? Expanded(
                  child: Container(
                    child: ListView.separated(
                      scrollDirection: Axis.vertical,
                      padding: EdgeInsets.symmetric(vertical: setWidth(20)),
                      itemBuilder: (context, index) {
                        return Padding(
                          padding: EdgeInsets.symmetric(horizontal: setWidth(50)),
                          child: Container(
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(setWidth(16)),
                              boxShadow: [
                                BoxShadow(
                                  color: Color(0x3B666666),
                                  offset: Offset(0, 0),
                                  blurRadius: 10.0,
                                  spreadRadius: 0,
                                ),
                              ],
                            ),
                            padding: EdgeInsets.only(
                              left: setWidth(30),
                              top: setWidth(30),
                              right: setWidth(30),
                              bottom: setWidth(26),
                            ),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                ClipRRect(
                                  borderRadius: BorderRadius.circular(setWidth(30)),
                                  child: Image.asset(
                                    'assets/images/home2bg1.png',
                                    width: setWidth(590),
                                    height: setWidth(374),
                                    fit: BoxFit.cover,
                                  ),
                                ),
                                SizedBox(
                                  height: setWidth(24),
                                ),
                                Text(
                                  '壹品会中秋节500元礼品卡',
                                  style: TextStyle(
                                    color: Color(0xff333333),
                                    fontSize: 15,
                                  ),
                                ),
                                SizedBox(
                                  height: setWidth(10),
                                ),
                                Text(
                                  '有效时间：2021年3月3日—2021年10月20日',
                                  style: TextStyle(
                                    color: Color(0xffcccccc),
                                    fontSize: 12,
                                  ),
                                ),

                              ],
                            ),

                          ),
                        );
                      },
                      separatorBuilder: (BuildContext context, int index) {
                        return SizedBox(
                          height: setWidth(40),
                        );
                      },
                      itemCount: 15,
                    ),
                  ),
                ) : Expanded(
                  child: Container(
                    color: Colors.white,
                    width: MediaQuery.of(context).size.width,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                          'assets/images/giftCardEmpty_image.png',
                          width: setWidth(230),
                          height: setWidth(148),
                          fit: BoxFit.cover,
                        ),
                        Padding(
                          padding: EdgeInsets.only(
                            top: setWidth(34),
                            bottom: setWidth(66),
                          ),
                          child: Text(
                            '暂无礼品卡',
                            style: TextStyle(
                              color: Color(0xff333333),
                              fontSize: 14,
                            ),
                          ),
                        ),
                        InkWell(
                          onTap: () {
                            print('绑定礼品卡  点击事件 ！！！！');
                            Get.toNamed(RouteConfig.giftCardBinding);
                          },
                          child: Container(
                            height: setWidth(332),
                            width: setWidth(520),
                            decoration: BoxDecoration(
                              color: Color(0xffF9FAFB),
                              borderRadius: BorderRadius.circular(setWidth(16)),
                            ),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                SizedBox(
                                  height: setWidth(10),
                                ),
                                Text(
                                  '+',
                                  style: TextStyle(
                                    color: Color(0xffcccccc),
                                    fontSize: 30,
                                  ),
                                ),
                                SizedBox(
                                  height: setWidth(14),
                                ),
                                Text(
                                  '绑定礼品卡',
                                  style: TextStyle(
                                    color: Color(0xffcccccc),
                                    fontSize: 14,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}